<!--
@Author: 刘洋 3016218175

@Date: 2018-12-12

@行政人员请假信息管理界面

@Last Modified time: 2018-12-16-->
<div class="box" style="margin: 5% 5% 5% 5%;float:left;width: 30%;text-align: center">
  <div class="box-header">
    <h3 class="box-title" style="float:left">请假列表</h3>
    <div class="box-tools">
      <div class="input-group input-group-sm" style="width: 150px;">
        <input type="number" #table_search class="form-control pull-right" placeholder="员工Id">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" (click)="getLeaveUser(table_search.value)"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </div>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <table class="table table-bordered">
      <tr>
        <th style="text-align:center">员工ID</th>
        <th style="text-align:center">请假时间</th>
        <th style="text-align:center">状态</th>
        <th style="width: 60px">类型</th>
        <th style="width: 60px">操作</th>
      </tr>
      <tr *ngFor="let leave of leaveRequest">
        <td>{{leave.user_id}}</td>
        <td>{{leave.start_time}} ~ {{leave.end_time}}</td>
        <td>{{getState(leave.state)}}</td>
        <td><span class="badge bg-blue">{{getType(leave.type)}}</span></td>
        <td><a class="btn btn-danger btn-xs" (click)="getLeaveDetail(leave)">查看</a></td>
      </tr>
    </table>
  </div>
</div>
<div class="box box-primary" style="float:right;width: 55%;margin-right: 5%;margin-top: 5%;text-align: center" *ngIf="leave">
  <div class="box-body box-profile">

    <h3 class="profile-username text-center">{{user.name}}</h3>

    <p class="text-muted text-center">部门：{{user.department}}&nbsp;&nbsp;&nbsp;职位：{{user.position}}&nbsp;&nbsp;&nbsp;员工ID：{{user.id}}</p>

    <ul class="list-group list-group-unbordered">
      <div>
        <li class="list-group-item">
          <b>{{getType(leave.type)}}</b> <a class="pull-left">请假类型</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{leave.duration}}</b> <a class="pull-left">请假时长</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <a class="pull-left">请假原因</a><br>
          <b>{{leave.reason}}</b> 
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{leave.start_time}}</b> <a class="pull-left">开始时间</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{leave.end_time}}</b> <a class="pull-left">结束时间</a>
        </li>
      </div>
      <div>
        <li class="list-group-item">
          <b>{{getState(leave.state)}}</b> <a class="pull-left">审批状态</a>
        </li>
      </div>
      <div style="white-space: pre-line;">
          <li class="list-group-item">
            <a class="pull-left">审批意见</a>
            <div>
                <textarea class="textarea" readonly="readonly" style="width: 90%; height: 150px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                    {{leave.suggestion}}
                </textarea>
              </div>
          </li>
        </div>

    </ul>

    <a class="btn btn-primary btn-block" (click)="leave=null"><b>确认</b></a>
  </div>
  <!-- /.box-body -->
</div>